/**
 * Created by chenzp on 18-7-27.
 */
+function () {



    $('#a_c_a_btn').openLyHtml('a_c_a_from', 'click',{area:'700*500',title:'新增'});


    var charaterSctrip = {

        $form:$('#aForm')

        ,$htmlB:$('#htmlBlock')

        ,init:function () {
            this.initSel()
            this.initEvent()
        }
        ,initEvent:function () {
            this.$form.find('select').on('change',function () {
                var index = $(this).find('option:selected').index()
                $('.block-model').hide()
                if (index > 0 ) {
                    $('.block-model').eq(index-1).show()
                }
            })
        }
        //初始化下拉框
        ,initSel:function () {
            var $this = this
            var $block = $('.block-model')

            //html标签
            $block.eq(0).find('input').on('focusout',function () {
                var $btn = $this.addHtmlBtnStore($(this).val())
                if(!$btn) return
                $(this).before($btn)[0].focus()
                $(this).val('')
            })

            $block.eq(0).find('.html-add-btn').on('click',function () {
                var $btn = $this.addHtmlBtnStore($(this).prev().val())
                if(!$btn) return
                $(this).prev().before($btn).val('')
            })

            //替换字符
            $block.eq(1).find('button').on('click',function () {
                var html_rep = `<div class="row" style="height: 37px;">
                    <input type="text" name="title" autocomplete="off" placeholder="原值"
                           class="layui-input mapping-tag">
                    <span class="mapping-tag">=></span>
                    <input type="text" name="title" autocomplete="off" placeholder="新值"
                           class="layui-input mapping-tag">
                   <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 20px;">―</button>
                </div>`

                var $html = $(html_rep)

                $html.find('input:eq(0)').on('focusout',function () {
                    $this.mappingStore = $this.mappingStore ? $this.mappingStore:[]
                    var val = $(this).val().trim()
                    if(!val){
                        lay.msg('值不能为空')
                        return
                    }

                    if($.inArray(val,$this.mappingStore) != -1) {
                        lay.msg('存在一样的值')
                        $(this).val('')
                        $(this)[0].focus()
                        return
                    }

                    $this.mappingStore.push(val)
                })

                $html.find('button').on('click',function () {
                    $html.remove()
                })

                $(this).parent().before($html)
            })

        }

        //添加html标签
        ,addHtmlBtnStore:function (value) {
            if(!value.trim()) {
                lay.msg('输入值不能为空')
                return false
            }
            this.htmlStore = this.htmlStore ? this.htmlStore:[]

            if($.inArray(value.trim(), this.htmlStore) != -1) {
                lay.msg('存在相同值')
                return false
            }

            this.htmlStore.push(value.trim())

            var $btn = $(`<button type="button" class="layui-btn layui-btn-sm html-tag">${value.trim()}<b>x</b></button>`)

            var $this = this
            $btn.find('b').on('click',function () {
                $this.htmlStore.splice($.inArray($(this).html().trim(),$this.htmlStore),1);
                $btn.remove()
            })

            return $btn
        }
    }


    charaterSctrip.init()


}(jQuery);
